import {
  Form, Select, InputNumber, Button, Upload, Icon, Input, DatePicker, message,
} from 'antd';
import * as React from "react";


import styles from './RuleAdd.css';
import TextArea from "antd/lib/input/TextArea";
import GiftManagerPros from "../pros/GiftManagerPros";
import {RuleDomain} from "../../business/rule/RuleDomain";
import RuleService from "../../business/rule/RuleService";
const {  RangePicker } = DatePicker;

const { Option } = Select;
const rangeConfig = {
  rules: [{ type: 'array', required: true, message: 'Please select time!' }],
};
class Rule extends React.Component<GiftManagerPros,any>{

  constructor(props){
    super(props)
    this.ruleService = new RuleService();
    this.handleChange = this.handleChange.bind(this);
    this.dataChange =this.dataChange.bind(this);
    this.handleSubmit =this.handleSubmit.bind(this);
    this.addSuccess =this.addSuccess.bind(this);
  }
  ruleService:RuleService;
  state = {
    ruleDomain:new RuleDomain(),
    addLoading:false,
  };
  addSuccess(res, isSuccess){
    if(!isSuccess || res.code !="200"){
      message.info(res.message);
    }else{
      message.info(res.message);
    }

    this.setState({
      addLoading:false,
    });
  }
  handleSubmit(e){
    e.preventDefault();
    // @ts-ignore
    this.props.form.validateFields((err, values) => {
      if (!err) {
        values.effectiveDate = this.state.ruleDomain.effectiveDate;
        values.expiredDate = this.state.ruleDomain.expiredDate;
        values.timeRange = null;
        let token = sessionStorage.getItem('adminLoginToken');
        this.ruleService.addRule(token,values,this.addSuccess);
        this.setState({
          addLoading:true,
        });
      }
    });


  }

  handleChange(event) {
    this.setState({ [event.target.name] : event.target.value});
  }
  dataChange(e,dateStrings){
    this.state.ruleDomain.effectiveDate =dateStrings[0];
    this.state.ruleDomain.expiredDate =dateStrings[1];
  }


  render() {
    // @ts-ignore
    const { getFieldDecorator } = this.props.form;
    const {addLoading} =this.state;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const r: RegExp = /[0-9]/;
    const dateFormat = 'YYYY-MM-DD';
    let username = sessionStorage.getItem('adminUsername');
    let host = sessionStorage.getItem(username+'_host');

    return (
      <div className={styles.normal}>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item>
            {getFieldDecorator('operateType',{initialValue:"add_activity"})(
              <input type="hidden"/>
            )}

          </Form.Item>
          <div>
            <div className={styles.gift_info_title}>填写活动信息</div>
          </div>
          <div className={styles.gift_base_info}>
            <div className={styles.gift_base_info_3}>
              <Form.Item
                {...formItemLayout}
                label="活动名称"
              >
                {getFieldDecorator('activityName',{rules: [
                    { required: true, message: '活动名称不能为空', type:"string"},
                  ],})(
                  <Input />
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="积分"
              >
                {getFieldDecorator('points',{rules: [
                    { required: true, message: '积分不能为空且为数字',type:"string",pattern:r},
                  ],})(
                  <Input />
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="限制人群"
              >
                {getFieldDecorator('limitedGroup',{})(
                  <Input />
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="联系人"
              >
                {getFieldDecorator('contactPerson',{rules: [
                    { required: true, message: '联系人不能为空',type:"string"},
                  ],} )(
                  <Input />
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="主办方"
              >
                {getFieldDecorator('host',{
                  initialValue:host,
                  rules: [
                    { required: true, message: '主办方不能为空',type:"string"},
                  ],} )(
                  <Input  disabled={true}/>
                )}
              </Form.Item>
              <Form.Item
                {...formItemLayout}
                label="起止时间"
              >
                {getFieldDecorator('timeRange', rangeConfig)(
                  <RangePicker
                    showTime={{
                      hideDisabledOptions: true,
                    }}
                    onChange={this.dataChange}
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                )}
              </Form.Item>
            </div>
          </div>
          <div>
            <div className={styles.gift_info_title}>活动描述</div>
          </div>
          <div className={styles.gift_base_info}>
            <div className={styles.gift_base_info_3}>
              <Form.Item
                {...formItemLayout}
                label="活动描述"
              >
                {getFieldDecorator('details', {rules: [
                    { required: true, message: '活动描述不能为空',type:"string"},
                  ],})(
                  <TextArea />
                )}
              </Form.Item>
            </div>
          </div>
          <div className={styles.gift_base_info}>
            <div className={styles.gift_base_info_3}>
              <Form.Item
                wrapperCol={{ span: 12, offset: 6 }}
              >
                <Button type="primary" htmlType="submit" loading={addLoading}>Submit</Button>
              </Form.Item>
            </div>
          </div>

        </Form>
      </div>
    );
  }
}

// @ts-ignore
const RuleAdd = Form.create({ name: 'validate_other' })(Rule);

export default RuleAdd;
